/**
 * create by Alec
 */
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { createForm } from "rc-form";
import autobind from "autobind-decorator";

// components
import LineChart from "../../components/LineChart";
import MultiLineChart from "../../components/LineChart/multiLine.jsx";

//将store注入组件的props
const mapStateToProps = () => ({});
//将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
    //区分绑定到props的action与传递的props
    actions: bindActionCreators(
        {
            dispatch,
        },
        dispatch
    )
});

@connect(mapStateToProps, mapDispatchToProps)
class OnJobChart extends Component {
    static defaultProps = {};
    //propTypes 验证
    static propTypes = {
        actions: PropTypes.shape({
            dispatch: PropTypes.func.isRequired,
        })
    };
    constructor(props) {
        super(props);
        this.state = {
            curChart: true,
            // plotCfg: {
            //     margin: [10, 10, 40, 40],
            //     background: {} // 绘图区域背景设置  
            // }
        };

    }

    toggle(bool) {
        window._rlog(`_stat_toggle`);
        this.setState({
            curChart: bool
        })
    }
    
    render() {
        const { onJob } = this.props;
        const { 
            totalEmployee, 
            expiryDate, 
            weeklyStatisticVOList = [],
            weeklyDismissionList = [],
            weeklyEntryList = [],
        } = onJob || {};
        console.log(weeklyDismissionList, weeklyEntryList)
        const width = 600, height = 400;
        return (
            <div className="on-job">
                <div className="title">
                    <i></i>
                    近四{ this.props.period === 'week' ? '周' : '月' }员工变动趋势
                </div>

                <div className="tab">
                    <div 
                        className={`tab-item ${this.state.curChart ? 'active' : '' }`} 
                        onClick={()=>this.toggle(true)}>
                        入离职员工
                    </div>
                    <div 
                        className={`tab-item ${this.state.curChart ? '' : 'active' }`} 
                        onClick={()=>this.toggle(false)}>
                        在职员工
                    </div>
                </div>
                {
                    this.state.curChart ?
                    <div className={`charts`}>
                        <div className='chart-title'>
                            <i className="color-g"></i>
                            <span className="title-item">
                                入职员工
                            </span>
                            <i className="color-o"></i>
                            <span className="title-item">
                                离职员工
                            </span>
                        </div>
                        <MultiLineChart 
                            chartData={weeklyDismissionList.concat(weeklyEntryList)} 
                            name={'入离职员工'}
                        />
                    </div> :
                    <div className={`charts`}>
                        <div className='chart-title'>
                            <i className="color-b"></i>
                            <span className="title-item">
                                在职员工
                            </span>
                        </div>
                        <LineChart 
                            chartData={weeklyStatisticVOList} 
                            name={'在职员工'}
                        />
                    </div>
                }
            </div>
        );
    }
}
export default createForm()(OnJobChart);
